import React, { useCallback, useEffect, useState } from "react";
import { connect } from 'react-redux'
import { withLogin } from '../utils/hoc'
import { Routes, Route } from 'react-router-dom'

import { useNavigate } from 'react-router-dom'
import { UploadOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import Home from "./manage/Home";
import Showdata from "./manage/Showdata";

const { Header, Content, Sider } = Layout;
// const items1 = ['1', '2', '3'].map((key) => ({
//     key,
//     label: ``,
// }));
// items1.map((item, key) => ({
//     key: item.key,
//     label: item.label
// }))
const admin = [
    {
        label: '用户管理',
        key: 'home/user',
        icon: UserOutlined,
        children: [
            {
                label: '用户列表',
                key: 'home/user/userlist',
            },
            {
                label: '添加用户',
                key: 'home/user/adduser'
            },
            {
                label: '编辑用户',
                key: 'home/user/edit'
            }
        ]
    },
    {
        label: '电影管理',
        key: 'home/movie',
        icon: UploadOutlined,
        children: [
            {
                label: '电影列表',
                key: 'home/movie/movielist',

            },
            {
                label: '添加电影',
                key: 'home/movie/addmovie'
            }
        ]
    },
]
const data = [
    {
        label: '电影类型图表',
        key: 'showdata/movietable',
        icon: UserOutlined,
        children: [
            {
                label: '现状图',
                key: 'showdata/movietable/line',
            },
            {
                label: '饼图',
                key: 'showdata/movietable/cake'
            }
        ]
    },
    // {
    //     label: '电影管理',
    //     key: 'movie',
    //     icon: UploadOutlined,
    //     children: [
    //         {
    //             label: '电影列表',
    //             key: 'movie/movielist',

    //         },
    //         {
    //             label: '添加电影',
    //             key: 'movie/addmovie'
    //         }
    //     ]
    // },
]




function Manage(props) {
    console.log('manage', props);
    const [right, setRight] = useState([...admin])
    const [userTag, setUserTag] = useState('')
    useEffect(() => {
        setUserTag(props.user.userInfo.username)
    }, [])
    const items1 = [
        {
            label: '首页',
            key: 'home'
        },
        {
            label: '数据',
            key: 'showdata',
        },
        {
            label: '退出' + userTag,
            key: '/'
        }
    ]
    items1.map((item, key) => ({
        key: item.key,
        label: item.label
    }))
    const navigate = useNavigate()

    // console.log('props', props);
    const changeNav = useCallback(({ key }) => {
        if (key == 'showdata') {
            setRight(data)
            // navigate
        } else if (key == 'home') {
            setRight(admin)
        }
        navigate(key)
    })
    const changeRightNav = useCallback(({ key }) => {
        navigate(key)

    })
    const rightNav = right.map((item, idx) => {
        return {
            key: item.key,
            label: item.label,
            icon: React.createElement(item.icon),
            children: item.children.map((val, idx) => {
                return {
                    key: val.key,
                    label: val.label
                }
            })
        }
    })
    return (
        <div>
            {/* Manage */}
            <Layout>
                <Header className="header">
                    <div className="logo" />
                    <Menu theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={items1}
                        onClick={changeNav}
                    />
                </Header>
                <Layout>
                    <Sider width={200} className="site-layout-background">
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{
                                height: '100%',
                                borderRight: 0,
                            }}
                            items={rightNav}
                            onClick={changeRightNav}
                        />
                    </Sider>
                    <Layout
                        style={{
                            padding: '0 24px 24px',
                        }}
                    >

                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            <Routes>

                                <Route path="home/*" element={<Home />}>
                                    {/* <Route path="userlist"></Route> */}
                                </Route>
                                <Route path="showdata/*" element={<Showdata />}> </Route>
                            </Routes>
                        </Content>
                    </Layout>
                </Layout>
            </Layout>



        </div>
    )
}


// Manage = withLogin(Manage)

// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    console.log('mapStateToProps', state);
    return {
        user: state.user
    }
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: 'logout' })
        }
    }
}
Manage = connect(mapStateToProps, mapDispatchToProps)(Manage)
export default Manage;